
#app {
  width: 100vw;
  height: 100vh;
  // font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
  //   "Microsoft YaHei", SimSun, sans-serif;
  font-family: PingFangSC-Regular, PingFang SC;
  background: #f8f8f8;
  .app-container {
    height: 100%;
    .app-container-head {
      display: flex;
      justify-content: space-between;
      color: #fff;
      height: 60px;
      line-height: 60px;
      background-color: var(--el-color-primary); /* 不支持线性的时候显示 */
      background-image: linear-gradient(
        to right,
        #ecf8ff var(--el-color-primary)
      );
      .logo-box {
        a {
          color: #fff;
        }
        .a-title {
          font-size: 24px;
          letter-spacing: 3px;
        }
        .a-download {
          color: #606266;
          font-weight: 600;
          font-size: 18px;
        }
      }
      .setting-box {
        display: flex;
        .el-dropdown {
          display: block;
          margin: auto 10px;
          color: #fff;
          cursor: pointer;
          .el-dropdown-link {
            display: flex;
            &:focus-visible {
              outline: none;
            }
          }
        }
        .el-color-picker {
          margin: auto;
          margin-left: 10px;
          background: #fff;
          border-radius: 5px;
        }
      }
    }
    .app-container-body {
      display: flex;
      height: calc(100% - 60px);
      display: flex;
      .side-menu {
      }
      .center-body {
        flex-direction: column;
        & > .el-breadcrumb {
          margin: 10px 20px;
          margin-bottom: 0;
        }
        & > .main-container {
          height: calc(100% - 24px);
          padding-top: 10px;
          margin-top: 10px;
          position: relative;
          .main-container-page {
            width: 100%;
            // transition: .5s;
            &.has-article {
              width: calc(100% - 180px);
            }
          }
          .article-tree-box {
            width: 200px;
            height: calc(100% - 60px);
            box-sizing: border-box;
            position: fixed;
            right: 0;
            bottom: 0;
            padding: 30px 10px;
            background: #fff;
            overflow-y: auto;
            .art-title {
              font-size: 14px;
              color: var(--text-color-light);
              font-weight: 600;
              text-transform: uppercase;
              margin-top: 0;
            }
            .art-items {
                padding: 0;
                margin: 12px 0 0;
                line-height: 1.2;
              .art-item {
                margin-top: 10px;
                font-size: 11px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                color: inherit;
                display: flex;
                .mark {
                  display: inline-block;
                  width: 4px;
                  min-width: 4px;
                  height: 14px;
                  background: transparent;
                  margin: auto 0;
                  border-radius: 5px;
                }
                .link {
                  position: relative;
                  display: inline-block;
                  color: #909399;
                  transition: color var(--el-transition-duration);
                  touch-action: manipulation;
                  margin: auto 0;
                  margin-left: 5px;
                  cursor: pointer;
                }
                &.active {
                  .mark {
                    background: var(--el-primary-color);
                  }
                  .link {
                    color: var(--el-primary-color);
                    font-weight: 600;
                  }
                }
              }
            }
          }
          .el-table {
            .el-table__header {
              th .cell {
                color: var(--el-text-color-primary);
              }
            }
            .el-table__body {
              .el-table__row .cell {
                color: var(--el-text-color-primary);
              }
            }
          }
        }
      }
    }
  }
  .d-code {
    padding: 0px 5px;
    margin: 0 5px;
    border-radius: 3px;
    font-family: PingFangSC-Regular, PingFang SC;
    background-color: var(--el-color-primary-light-9);
    color: var(--el-color-primary);
  }
  .s-code {
    padding: 0px 5px;
    margin: 0 5px;
    border-radius: 3px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: var(--el-color-primary);
  }
  t {
    display: inline-block;
    border-bottom: 2px solid var(--el-primary-color-light-5);
    margin: 10px 0;
    padding: 5px 15px;
    font-size: 18px;
    font-weight: 600;
    color: #444;
    background: var(--el-primary-color-light-9);
    &.t1 {
      font-size: 26px;
      background: transparent;
      margin: 20px 0;
      color: #333;
      border-bottom: 0;
      padding: 0;
    }
    &.t2 {
      font-size: 22px;
      background: transparent;
      margin: 16px 0;
    }
    &.t4 {
      font-size: 18px;
      background: transparent;
      margin: 10px 0;
      border-bottom: 0;
      padding: 0;
      color: #555;
    }
  }
  .s-code-9 {
    @extend .s-code;
    color: var(--el-color-primary-light-1);
  }
  .s-code-8 {
    @extend .s-code;
    color: var(--el-color-primary-light-2);
  }
  .s-code-7 {
    @extend .s-code;
    color: var(--el-color-primary-light-3);
  }
  .s-code-6 {
    @extend .s-code;
    color: var(--el-color-primary-light-4);
  }
  .s-code-5 {
    @extend .s-code;
    color: var(--el-color-primary-light-5);
  }
  .s-code-4 {
    @extend .s-code;
    color: var(--el-color-primary-light-6);
  }
  .s-code-3 {
    @extend .s-code;
    color: var(--el-color-primary-light-7);
  }
  .s-code-2 {
    @extend .s-code;
    color: var(--el-color-primary-light-8);
  }
  .s-code-1 {
    @extend .s-code;
    color: var(--el-color-primary-light-9);
  }
  .s-code-gray {
    @extend .s-code;
    color: #999;
    // background-color: var(--el-color-primary-light-9);
  }
}

.test-component-page {
  .example-box {
    width: 100%;
    background: #fff;
    .describe-box {
      margin-bottom: 10px;
    }
    .example {
      .slot-content {
        // padding: 0;
        // border-bottom: 0;
      }
    }
  }
}
.languages-popper {
  .el-dropdown-menu {
    .el-dropdown-menu__item {
      background: #fff;
    }
  }
}
.el-backtop {
  --el-backtop-bg-color: var(--el-color-primary-light-9);
  --el-backtop-hover-bg-color: var(--el-color-primary-light-8);
}
li {
  line-height: 1.8;
}
h3 {
    font-size: 18px;
    color: #666;
}
.pointer {
  cursor: pointer;
}
